
<template>
  <!------------------------------------ 商品分享弹窗 ------------------------------------
    @desc 商品分享弹窗
    @author kyle
    @date 2021-03-11
    @props
      detailData     ———— 商品详情数据
      evaluateData   ———— 商品评论数据
    @method
      showOpt    ———— 显示弹窗
      clickLeft  ———— 头部左侧返回按钮
  -->
  <div class="pos-r">
		
    <div v-show="!replaceImg" ref="imgContent" class="share-dialog">
      <div class="dialog-bd tal">
        <div class="media-obj flex">
          <div class="media-head-box flex-s-0 mr-10">
            <img-box class="img-box" :img-url="detailData.Images" />
            <!-- 截屏不能识别图片圆角，所以利用背景图实现头像圆角 -->
            <div class="media-head-bg" :style="bg" />
          </div>
          <div class="pb-10">
            <p class="fs-26">{{ detailData.NickName }}</p>
            <p class="fs-24 color-gray-light">{{ detailData.Slogan }}</p>
          </div>
        </div>
        <div class="bg-white br-12 pd-25">
          <div class="max-img-height">
            <img-box class="full-width full-height" :img-url="headImg" />
          </div>
          <div class="flex mt-20 pos-r">
            <div class="flex-d-c flex-s-fs flex-1 pos-r">
              <div>
                <p class="color-primary">
                  <span>￥</span>
                  <span class="fs-52">{{ GradePrice_1 }}.</span>
                  <span>{{ GradePrice_2 }}</span>
                </p>
                <p v-show="productInfo.MarkePrice>productInfo.V_GradePrice&&productInfo.MarkePrice>0" class="color-gray-light">原价 <span class="delete-line">{{ productInfo.MarkePrice }}</span></p>
              </div>
              <p class="fs-28 color-dark lh">{{ productInfo.ProductName }}</p>
            </div>
            <div class="ml-20 tac flex-s-0">
              <div ref="qrCode" class="qr-code" />
              <p class="fs-20 color-gray-light mt-20">长按图片识别二维码</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="share-img-box">
      <img v-show="replaceImg" :src="replaceImg">
    </div>
  </div>
</template>

<script>
import imgBox from 'components/imgBox'
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
import headBg from 'assets/images/media-head-bg.png'
import { GetProductShareImage } from 'api/product'
export default {
  name: 'Share',
  components: {
    imgBox
  },
  props: {
    detailData: { // 数据
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    },
    changeImg: {
      type: Boolean,
      required: false,
      default: false
    },
     storeId: {
      type: String,
      required: false,
      default: ''
    },
		isSeckill: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      headBg,
      bg: {
        backgroundImage: 'url(' + require('@/assets/images/media-head-bg.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100%',
        width: '100%'
      },
      replaceImg: '',
			url: '',
    }
  },
  computed: {
    productInfo() {
      return this.detailData.ProductInfo || {}
    },
    GradePrice_1() {
      let _price = 0
      if (this.detailData.ProductInfo && this.detailData.ProductInfo.V_GradePrice) {
        _price = this.detailData.ProductInfo.V_GradePrice.toFixed(2).split('.')[0]
      }
      return _price
    },
    GradePrice_2() {
      let _price = 0
      if (this.detailData.ProductInfo && this.detailData.ProductInfo.V_GradePrice) {
        _price = this.detailData.ProductInfo.V_GradePrice.toFixed(2).split('.')[1]
      }
      return _price
    },
    headImg() {
      let _img = ''
      if (this.detailData.imgList && this.detailData.imgList.length > 0) {
        _img = this.detailData.imgList[0]
      }
      return _img
    }
  },
  watch: {
    changeImg(newVal, oldVal) {
      if (newVal) {
        this.initData()
        this.replaceToImg()
      }
    },
		detailData(newVal, oldVal) {
			this.detailData = newVal
      console.log('gaibian',this.detailData)
		}
  },
  created() {
  },
  mounted() {
    this.initData()
  },
  methods: {
		GetProductShareImage(){
			const obj= {}
			if(this.productInfo.ProductId){
				obj.productId = this.productInfo.ProductId
			}else{
				obj.productId = this.productInfo.ID
			}
			obj.url = this.url
			var ua = window.navigator.userAgent.toLowerCase()
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				wx.miniProgram.getEnv(function (res) {
					if (res.miniprogram) {
						// 小程序环境下逻辑
						obj.minApp = 0
					} else {
						//非小程序环境下逻辑
						obj.minApp = 1
					}
				});
			}else{
				obj.minApp = 2
			}
			if(obj.productId){
				GetProductShareImage(obj).then((res) => {
					if(res.Data){
						this.replaceImg = res.Data
					}
				})
			}else{
				this.GetProductShareImage()
			}
			
		},
    initData() {
			
      let _url;
      if(this.storeId){
				if(this.isSeckill){
					_url = this.$LocalDomain + '/circle/#/seckillDetail/' + this.productInfo.ActivityId+'?storeId='+this.storeId
				}else{
					_url = this.$LocalDomain + '/circle/#/QuickPlaceOrder/retailDetail/' + this.productInfo.ID+'?storeId='+this.storeId
				}
      }else{
				if(this.isSeckill){
					_url = this.$LocalDomain + '/circle/#/seckillDetail/' + this.productInfo.ActivityId+'?storeId='+this.storeId
				}else{
        	_url = this.$LocalDomain + '/circle/#/QuickPlaceOrder/detail/' + this.productInfo.ID
				}
      }
			this.url = _url
			setTimeout(()=>{
				this.GetProductShareImage()
			},1000)
      //this.creatQrCode(_url)
      //this.replaceImg = ''
			this.$forceUpdate()
    },
    creatQrCode(url) {
      this.$refs.qrCode.innerHTML = ''
      var qrcode = new QRCode(this.$refs.qrCode, {
        text: url, // 需要转换为二维码的内容
        width: 70,
        height: 70,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    replaceToImg() {
    //  setTimeout(() => {
    //    html2canvas(this.$refs.imgContent, {
    //      backgroundColor: null,
    //      allowTaint: false,
    //      logging: false, // 日志开关，便于查看html2canvas的内部执行流程
    //      width: this.$refs.imgContent.clientWidth, // dom 原始宽度
    //      height: this.$refs.imgContent.clientHeight,
    //      scrollY: 0,
    //      scrollX: 0,
    //      scale: window.devicePixelRatio,
    //      useCORS: true // 图片跨域
    //    }).then((canvas) => {
    //      const url = canvas.toDataURL('image/png')
    //      this.replaceImg = url
    //      this.$forceUpdate()
    //    })
    //  }, 200)
    }
  }
}
</script>

<style lang="scss" scoped>
.share-dialog{
  background: $colorF5;
  .dialog-bd{
    padding: 30px;
    .media-head-box{
      position: relative;
      height: 66px;
      width: 66px;
      .img-box{
        width: 98%;
        height: 98%;
      }
      .media-head-bg{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-size: 100% 100%;
      }
    }
    .delete-line{
      position: relative;
      &:after{
        content: '';
        position: absolute;
        width: 110%;
        height: 2px;
        left: -5%;
        top: 50%;
        background: currentColor;
      }
    }
    .max-img-height{
        max-height: 600px;
        /deep/img{
          max-height: 600px;
        }
      }
    .qr-code{
      height: 140px;
      width: 140px;
      margin: 0 auto;
    }
  }
}
.share-img-box{
  // position: absolute;
  // top: 0;
  // left: 0;
  // width: 100%;
  // height: 100%;
}
</style>
